<script setup lang="ts">
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'
import type { CustomDialogInstance } from '@/types'
import useTableLists from '@/views/carbon-emission-factors/composable'

const emit = defineEmits<{
  (e: 'open'): void
  (e: 'close'): void
  (e: 'selectEmissionFactor', data: any): void
}>()

const dialogRef = ref<CustomDialogInstance>()
const energyName = ref('')
const startTime = ref('')
const {
  tableData,
  loading,
  columns: _columns,
  pagination,
  queryList,
} = useTableLists()

const columns = _columns.value.filter(v => v.type !== 'selection')

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  await queryList({
    energyName: energyName.value,
    startTime: startTime.value,
  })
}

function handleSelectEmissionFactor(row: any) {
  close()
  emit('selectEmissionFactor', row)
}

async function open() {
  clickSearch()
  dialogRef.value?.open()
  emit('open')
}

async function close() {
  dialogRef.value?.close()
  emit('close')
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="因子库"
    width="1000px"
    :need-saving="false"
    :show-cancel-button="false"
    :show-confirm-button="false"
  >
    <div class="flex flex-col justify-end">
      <TableLists
        :lists="tableData" :loading="loading"
        :columns="columns" :show-toolbox="false"
        height="300px"
      >
        <template #actions>
          <div class="w-full flex items-center">
            <span class="fs-14 mr-3">能源品种</span>
            <ElInput v-model="energyName" class="w-40" placeholder="模糊搜索" clearable />
            <span class="fs-14 mx-3">起始日期</span>
            <ElDatePicker
              v-model="startTime"
              class="w-40"
              type="date"
              placeholder="起始日期"
              value-format="YYYY-MM-DD"
              clearable
            />
            <SearchButton class="ml-3" @click="clickSearch" />
          </div>
        </template>
        <template #operate="{ row }">
          <ElLink :underline="false" type="success" @click="handleSelectEmissionFactor(row)">
            使用
          </ElLink>
        </template>
      </TableLists>
      <ListsPagination
        v-model:page-num="pagination.pageNumber"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        @change="queryList"
      />
    </div>
  </CustomDialog>
</template>
